<template>
    <div class="app-container">
        <!-- 快速入门 -->
        <div>
            <div class="border-b-2 text-base">
                <span>{{ $t('help.help.quickStart') }}</span>
                <div class="float-right">
                    <a class="mr-2 cursor-pointer text-[#409EFF]" @click="toVideo">{{ $t('help.help.video') }}<el-icon>
                            <Link />
                        </el-icon></a>
                    <span> {{ $t('help.help.manual') }}
                        <Download @click="onDownload" style="width: 20px; height: 20px;"
                            class=" text-[#409EFF] float-right" />
                    </span>
                </div>
            </div>
            <div class="w-5/6 p-4">
                <div class="w-full flex flex-wrap">
                    <div class="w-1/3" v-for="(items, index) in list" :key="items.id">
                        <div class="mb-2 truncate">{{ $t('help.help.step') }}<i class="text-lg font-bold">{{ items.id }}</i></div>
                        <div class="mb-4 truncate">
                            <DocumentAdd v-if="items.id == 1" style="width: 20px; height: 20px;"
                                class="float-left mr-2" />
                            <Tools v-if="items.id == 2" style="width: 20px; height: 20px;" class="float-left mr-2" />
                            <Monitor v-if="items.id == 3" style="width: 20px; height: 20px;" class="float-left mr-2" />
                            <span>{{ items.title }}</span>
                        </div>
                        <div class="ml-7" v-for="(item, index) in items.list" :key="item.value">
                            <div class="mb-2 truncate cursor-pointer text-[#409EFF]" @click="toPages(items, item)">{{
                                item.title }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 意见与建议 -->
        <div>
            <div class="border-b-2 text-base">
                <span>{{ $t('help.help.sugge') }}</span>
                <span class="relative float-right">
                    <PhoneFilled src="@/assets/setbe.png" class="absolute top-0 left-1/24 text-[#409EFF]"
                        style="width: 20px; height: 20px;left: -10%;" />
                    {{ $t('help.help.national') }}：18925709569
                </span>
            </div>
            <div class="w-5/6 p-4 h-64 w-full flex flex-wrap">
                <div class="w-2/5">
                    <p class="mb-4">
                        {{ $t('help.help.thank') }}
                    </p>
                    <div class="relative">
                        <span class="text-[red] relative top-7">*</span>
                        <el-input class="mb-4  ml-2" v-model="data.addinfo.content" maxlength="500" minlength="15"
                            show-word-limit type="textarea" :placeholder="$t('message.pleaseDesc')" />
                    </div>

                    <el-form-item :label="$t('presets.view.uploadPic')+':'" prop="title">
                        <Upload :list="{ 'data': 'adv', 'list': false }" :type="1" :uptype="6" @exposeData="expose" />
                        <div class="w-20 ml-4 relative" @mouseenter="handleMouseEnter(index)"
                            @mouseleave="handleMouseLeave" v-for="(item, index) in data.uploadUrl" :key="index"><img
                                :src="item" alt="">
                            <div v-if="uploadIndex == index"
                                class="flex absolute top-0 left-0 bg-[#808585ad] bottom-0 right-0">
                                <div class="self-center ml-8" @click="onDel(index)">
                                    <el-icon>
                                        <DeleteFilled color="#fff" />
                                    </el-icon>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                    <span class="text-[red] relative top-7">*</span>
                    <el-form-item :label="$t('help.help.email')+':'" prop="title" class="w-2/3 ml-2">
                        <el-input v-model="data.addinfo.email" :placeholder="$t('message.pleaseProvide')" />
                    </el-form-item>
                </div>
            </div>
            <div class="pt-24" v-prmis="'suggest_add'">
                <el-button type="primary" @click="onSubmit()">{{ $t('help.help.Feedback') }}</el-button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import { getsuggestAdd } from '@/api/system'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';
import { exportData } from "@/utils/excel";
const router = useRouter();
let list = ref([
    { id: 1, title: $t('marketing.guess.addContent'), list: [{ title: $t('help.help.goodsList'), value: 1 }, { title: $t('help.help.goodsLists'), value: 2 }, { title: $t('help.help.materialList'), value: 3 }] },
    { id: 2, title: $t('machine.configs.machine'), list: [{ title: $t('help.help.templateView'), value: 1 }, { title: $t('help.help.machineList'), value: 2 }, { title: $t('help.help.advertisement'), value: 3 }] },
    { id: 3, title: $t('help.help.Manage'), list: [{ title: $t('help.help.accountList'), value: 1 }, { title: $t('help.help.saleOrder'), value: 2 }, { title: $t('help.help.salesReport'), value: 3 }] }
])
let data = reactive({
    uploadUrl: [],
    content: '',
    dialogVisible: false, // 弹窗
    title: '',
    addinfo: { // 筛选数据
        email: '',
        content: '',
        pic: ''
    },
    flag: 1,
    total: 0, // 总条数
})
const uploadIndex = ref()
let toPages = (lv1: any, lv2: any) => {
    if (lv1.id == 1) {
        if (lv2.value == 1) {
            router.push({ path: '/goods/type' })
        }
        if (lv2.value == 2) {
            router.push({ path: '/goods/info' })
        }
        if (lv2.value == 3) {
            router.push({ path: '/source/index' })
        }
    }
    if (lv1.id == 2) {
        if (lv2.value == 1) {
            router.push({ path: '/presets/view' })
        }
        if (lv2.value == 2) {
            router.push({ path: '/machine/info' })
        }
        if (lv2.value == 3) {
            router.push({ path: '/advment/info/index' })
        }
    }
    if (lv1.id == 3) {
        if (lv2.value == 1) {
            router.push({ path: '/account/account' })
        }
        if (lv2.value == 2) {
            router.push({ path: '/operateData/salesData' })
        }
        if (lv2.value == 3) {
            router.push({ path: '/report/sales' })
        }
    }
}
let toVideo = ()=>{
    router.push({path:'/video/index'})
}
let onDownload = () => {
    exportData('/vue/file/翠峰后台管理平台说明书（PC端）.docx', '翠峰后台管理平台说明书（PC端）.docx', 2)
}
let onDel = (index) => {
    data.uploadUrl.splice(index, 1);
}
let handleMouseEnter = (index: number) => {
    uploadIndex.value = index
}
let handleMouseLeave = () => {
    uploadIndex.value = null
}
let expose = (e) => {
    if (e.status == 200) {
        data.uploadUrl.push(e.file.response.data)
    }
}
let onSubmit = () => {
    if (!data.addinfo.content) {
        return ElMessage({
            message:  $t('message.contentUnEmpty'),
            type: 'error'
        })
    }
    data.addinfo.pic = data.uploadUrl.join(',')
    getsuggestAdd(data.addinfo).then(res => {
        ElMessage({
            message: $t('message.submitSuccess'),
            type: 'success'
        })
    }).catch(err => {
        console.log(err)
    })
}
</script>